import { rules, required } from '@/utils/formRules'
/**
 * @description 表格配置
 * @param 其余参数参考antd table
 * @param {String} type 类型：input输入框，tree树结构，number数字，date时间，type只要存在则被a-form-item包裹
 * @param {Boolean} required 是否必填，默认false
 * @param {Array} option 下拉选项，选择器和树结构需要
 * @param {Object} optionConfig 下拉选项对象集合，在组件中传入{xxx: []}
 * @param {Boolean|String} disabled 为字符串时，disabledConfig和disabledKeys必须存在一个，如果都存在则互相对比，相同值则禁用
 * @param {String} disabledKeys 禁用对比字段：转递当前行需要对比字段key
 * @param {Object} disabledConfig 在组件中传入的disabledConfig对象，用于对比disabledKeys或其他值
 */

// form配置，使用的key作为唯一，表格是dataIndex
export const form = [
  {
    key: 'name',
    title: '名字',
    type: 'input',
    required: true,
    colSpan: 8
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    key: 'phone',
    type: 'input',
    rules: rules['phone'],
    colSpan: 8
  },
  {
    key: 'select',
    title: '选择器',
    type: 'select',
    option: [{ id: 1, name: '天河区' }],
    colSpan: 8,
    // 简单的处理
    change: (data) => {
      data.name = undefined
      data.phone = undefined
    }
  },
  {
    key: 'selectSearch',
    title: '搜索选择器',
    type: 'select',
    showSearch: true,
    option: [{ id: 1, name: '白云区' }],
    params: {
      name: 'name' // 赋值 name = 当前选中的name
    }
  },
  {
    key: 'tree',
    title: '树结构',
    type: 'tree',
    option: [
      { id: 1, name: '广州', children: [{ pid: 1, id: 11, name: '天河区' }] }
    ],
    params: {
      name: 'name' // 赋值 name = 当前选中的name
    }
  },
  {
    key: 'date',
    title: '时间',
    type: 'date'
  },
  {
    title: '时间区间',
    dataIndex: 'range',
    key: 'range',
    type: 'range',
    required: true,
    params: ['start', 'end'], // 对start/end字段进行赋值，索引对于本身
    colSpan: 12
  },
  {
    title: '时间区间（时分秒）',
    dataIndex: 'rangeTime',
    key: 'rangeTime',
    type: 'range-time',
    required: true,
    params: ['startTime', 'endTime'],
    colSpan: 12
  },
  {
    key: 'upload',
    title: '上传',
    type: 'upload'
  },
  {
    key: 'customize',
    title: '自定义',
    slotName: 'customize'
  }
]

export const columns = [
  {
    width: 70,
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    type: true
  },
  {
    title: '用户名',
    dataIndex: 'name',
    key: 'name',
    type: 'input',
    disabled: 'name',
    // 如果disabledConfig存在name字段，则假设当前用户userId需要跟id字段对比，不相等则禁用，userId可以是其他字段
    disabledKeys: 'id'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    type: 'input',
    disabled: 'age',
    disabledKeys: 'ages' // 需要跟ages字段对比，不相等则禁用
  },
  {
    title: '年龄2',
    dataIndex: 'ages',
    key: 'ages',
    disabled: 'ages',
    type: 'input'
  },
  {
    title: '测试效验/禁用',
    dataIndex: 'requiredDisabled',
    key: 'requiredDisabled',
    type: 'input',
    p: '用户名输入123开启',
    // 通过函数判断是否必填/禁用
    required: ({ record }) => record.name === '123',
    disabled: ({ record }) => record.name !== '123'
  },
  {
    title: '选择器',
    dataIndex: 'select',
    key: 'select',
    type: 'select',
    option: [
      { name: '正常', id: 1 },
      { name: '错误', id: 2 }
    ]
  },
  {
    title: '搜索选择器',
    dataIndex: 'selectSearch',
    key: 'selectSearch',
    type: 'select',
    showSearch: true,
    option: 'selectOptions'
  },
  {
    title: '树结构',
    dataIndex: 'tree',
    key: 'tree',
    type: 'tree',
    option: 'treeOptions'
  },
  {
    title: '数字',
    dataIndex: 'number',
    key: 'number',
    type: 'number',
    required: true
  },
  {
    title: '时间',
    dataIndex: 'date',
    key: 'date',
    type: 'date',
    required: true
  },
  {
    title: '附件',
    dataIndex: 'annex',
    key: 'annex',
    type: true
  },
  {
    title: '操作',
    key: 'operate',
    dataIndex: 'operate',
    fixed: 'right',
    type: 'operate',
    width: 80
  }
]

// 表单间隔
export const formItemLayout = {
  labelCol: {
    style: { width: '150px' }
    // span: 4 // 限制表单label长度
  }
  // wrapperCol: {
  //   span: 8 // 限制表单输入框/内容长度
  // }
}
